<template>
  <div class="isbodys">
    <div class="workOrdersbox">
      <div class="gongdan">
        <div>工单统计<span>2022.10.01 ~ 2022.10.16</span></div>
      </div>
      <div class="gongdan2">
        <div class="item1">
          <div>
            <div class="itembox1">{{ ticketData.totalNumberOfTickets }}</div>
            <div class="itembox">工单总数（个)</div>
          </div>
          <div>
            <div class="itembox1">{{ ticketData.completeTheTicket }}</div>
            <div class="itembox">工单总数（个)</div>
          </div>
          <div>
            <div class="itembox1">{{ ticketData.makeATicket }}</div>
            <div class="itembox">进行工单（个)</div>
          </div>
          <div>
            <div class="itembox1">{{ ticketData.cancelATicket }}</div>
            <div class="itembox">取消工单（个）</div>
          </div>
        </div>
      </div>
    </div>
    <div class="workOrdersbox headers">
      <div class="gongdan">
        <div>销售统计<span>2022.10.01 ~ 2022.10.16</span></div>
      </div>
      <div class="gongdan2">
        <div class="item1 item2">
          <div>
            <div class="itembox1 itembox3">{{ salesData.orderVolume }}</div>
            <div class="itembox itembox2">订单量（个）</div>
          </div>
          <div>
            <div class="itembox1 itembox3">{{ salesData.sales }}</div>
            <div class="itembox itembox2">销售额（万元）</div>
          </div>
        </div>
      </div>
    </div>
    <div class="shop">
      <div class="heater">
        <div>商品热榜<span>2022.10.01 ~ 2022.10.16</span></div>
      </div>
      <div class="bodys">
        <div class="imgHot">
          <div class="img1"><div>1</div></div>
          <div class="img2"><div>2</div></div>
          <div class="img3"><div>3</div></div>
          <div class="img4"><div>4</div></div>
          <div class="img4"><div>5</div></div>
          <div class="img4"><div>6</div></div>
          <div class="img4"><div>7</div></div>
          <div class="img4"><div>8</div></div>
          <div class="img4"><div>9</div></div>
          <div class="img4 img5"><div>10</div></div>
        </div>
        <div class="hot">
          <div v-for="(item, index) in hotData" :key="index" class="hotData">
            <div>{{ item.skuName }}</div>
            <div class="texts">{{ item.count + "" }}单</div>
          </div>
        </div>
      </div>
      <div class="echarts">
        <div>销售数据 {{ startTime }} ~ {{ endTime }}</div>
        <div class="isBool">
          <div :class="{boxs: isbool === 1}" @click="box1">周</div>
          <div :class="{boxs: isbool === 2}" @click="box2">月</div>
          <div :class="{boxs: isbool === 3}" @click="box3">年</div>
        </div>
        <div id="main" style="width: 620px; height: 300px" class="echarts1" />
        <div id="main2" style="width: 420px; height: 250px" class="echarts2" />
      </div>
      <div class="bing">
        <div class="text">合作商点位数Top5</div>
        <div><i class="el-icon-right" @click="routerto1" /></div>
        <div id="main3" style="width: 500px; height: 300px" class="echarts2" />
        <div class="binbox">
          <div>
            <div class="txt">34</div>
            <div>点位数</div>
          </div>
          <div>
            <div class="txt">5</div>
            <div>合作商数</div>
          </div>
        </div>
      </div>
      <div class="kong">
        <div>异常设备监控</div>
        <div><i class="el-icon-right icon" @click="routerto2" /></div>
        <div class="img">
          <img src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="">
          <div class="txt">暂无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { ticketStatus, salesStatisticsAPI, salesAPI, hotAPI, salesDataAPI, salesDivisionAPI, serviceAPI, num1, num2 } from '@/api/eCharts'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      youbing: [],
      isbool: 1,
      getticketStatusList: [],
      //  工单数据
      ticketData: {
        // 工单总数
        totalNumberOfTickets: '',
        // 取消工单
        cancelATicket: '',
        // 完成工单
        completeTheTicket: '',
        // 进行工单
        makeATicket: 0
      },
      // 销售统计
      salesData: {
        // 订单量（个）
        orderVolume: '',
        // 销售额（万元）
        sales: ''
      },
      // 商品热榜
      hotData: [],
      // 折线图
      series: [],
      xAxis: [],
      // 柱状图
      zhu: {
        series: [],
        xAxis: []
      },
      num1: '',
      num2: '',
      startTime: dayjs(dayjs(new Date(new Date().getTime() - (3600 * 1000 * 24 * (new Date().getDay() - 1)))).format('YYYY-MM-DD')).format('YYYY-MM-DD'),
      endTime: dayjs(new Date().valueOf()).format('YYYY-MM-DD')
    }
  },
  mounted() {
  },
  async updated() {
    const res = await serviceAPI()
    this.$nextTick(() => {
      this.youbing = res
    })
    console.log(this.youbing)
    this.getEcharts1()
    this.getEcharts2()
    this.getEcharts3()
  },
  created() {
    // 销售数据
    this.getsalesData()
    // 工单状态统计
    this.getticketStatus()
    // 销售统计
    this.getsalesStatistics()
    // 销售额（万元）
    this.getsales()
    // 商品热榜
    this.gethot()
    // 销售分部柱状图
    this.getsalesDivisionAPI()
    // 油饼图
    // this.getserviceAPI()
  },

  methods: {
    // 折线图组件 echatrs
    getEcharts1() {
      // console.log(this.series)
      const myChart = echarts.init(document.getElementById('main'))
      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxis
        },
        title: {
          left: 'center',
          text: '销售额趋势图'
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.series,
            type: 'line',
            areaStyle: {}
          }
        ]
      }
      myChart.setOption(option)
    },
    // 树状图
    getEcharts2() {
      const myChart = echarts.init(document.getElementById('main2'))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        title: {
          left: 'center',
          text: '销售额分布'
        },
        xAxis: [
          {
            type: 'category',
            data: this.zhu.xAxis,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: this.zhu.series
          }
        ]
      }
      myChart.setOption(option)
    },
    getEcharts3() {
      console.log(this.youbing)
      const myChart = echarts.init(document.getElementById('main3'))
      const option = {
        tooltip: {
          trigger: 'item'
        },
        visualMap: {
          show: false,
          max: 600,
          inRange: {
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: [50, 120],
            data: this.youbing,
            roseType: 'radius',
            label: {
              color: ''
            },
            labelLine: {
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0)'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    // 工单状态统计
    async  getticketStatus() {
      const res = await ticketStatus()
      this.getticketStatusList = res
      this.ticketData.totalNumberOfTickets = this.getticketStatusList.reduce((prve, item) => {
        return prve + item.total
      }, 0)
      this.ticketData.cancelATicket = this.getticketStatusList.reduce((prve, item) => {
        return prve + item.cancelTotal
      }, 0)
      this.ticketData.completeTheTicket = this.getticketStatusList.reduce((prve, item) => {
        return prve + item.completedTotal
      }, 0)
    },
    // 销售统计
    async getsalesStatistics() {
      const res = await salesStatisticsAPI()
      this.salesData.orderVolume = res
    },
    // 销售统计
    async getsales() {
      const res = await salesAPI()
      // console.log(res / 100000)
      const num = res / 1000000
      this.salesData.sales = num.toFixed(2)
    },
    // 商品热榜
    async gethot() {
      const res = await hotAPI()
      this.hotData = res
    },
    // // 销售数据
    async getsalesData() {
      const start = dayjs(dayjs(new Date(new Date().getTime() - (3600 * 1000 * 24 * (new Date().getDay() - 1)))).format('YYYY-MM-DD')).format('YYYY-MM-DD')
      const endTime = dayjs(new Date().valueOf()).format('YYYY-MM-DD')
      const res = await salesDataAPI(start, endTime)
      this.series = res.series
      this.xAxis = res.xAxis
    },
    // 销售分部
    async getsalesDivisionAPI() {
      const start = dayjs(dayjs(new Date(new Date().getTime() - (3600 * 1000 * 24 * (new Date().getDay() - 1)))).format('YYYY-MM-DD')).format('YYYY-MM-DD')
      const endTime = dayjs(new Date().valueOf()).format('YYYY-MM-DD')
      const res = await salesDivisionAPI(start, endTime)
      this.zhu.series = res.series
      this.zhu.xAxis = res.xAxis
    },
    // 油饼图
    // async getserviceAPI() {

    // },
    // 切换
    async  box1() {
      const start = dayjs(dayjs(new Date(new Date().getTime() - (3600 * 1000 * 24 * (new Date().getDay() - 1)))).format('YYYY-MM-DD')).format('YYYY-MM-DD')
      const endTime = dayjs(new Date().valueOf()).format('YYYY-MM-DD')
      this.startTime = start
      this.endTime = endTime
      const res = await salesDataAPI(start, endTime)
      this.series = res.series
      this.xAxis = res.xAxis
      const res2 = await salesDivisionAPI(start, endTime)
      this.zhu.series = res2.series
      this.zhu.xAxis = res2.xAxis
      this.isbool = 1
    },
    async  box2() {
      const date = new Date()
      const start = dayjs(date.setDate(1)).format('YYYY-MM-DD')
      const endTime = dayjs(new Date().valueOf()).format('YYYY-MM-DD')
      this.startTime = start
      this.endTime = endTime
      const res = await salesDataAPI(start, endTime)
      this.series = res.series
      this.xAxis = res.xAxis
      const res2 = await salesDivisionAPI(start, endTime)
      this.zhu.series = res2.series
      this.zhu.xAxis = res2.xAxis
      this.isbool = 2
    },
    async  box3() {
      const start = `${dayjs(new Date().valueOf()).format('YYYY')}-01-01`
      const endTime = dayjs(new Date().valueOf()).format('YYYY-MM-DD')
      this.startTime = start
      this.endTime = endTime
      const res = await salesDataAPI(start, endTime)
      this.series = res.series
      this.xAxis = res.xAxis
      const res2 = await salesDivisionAPI(start, endTime)
      this.zhu.series = res2.series
      this.zhu.xAxis = res2.xAxis
      this.isbool = 2
      this.isbool = 3
    },
    async getnum() {
      this.num1 = await num1()
      this.num2 = await num2()
    },
    routerto1() {
      this.$router.push('/node/partner')
    },
    routerto2() {
      this.$router.push('/404')
    }
  }
}
</script>

<style lang="scss" scoped>
.workOrdersbox {
  width: 600px;
  height: 205.5px;
  background-color: #deebfd;
  border-radius: 20px;
  font-weight: 600;
  padding: 15px;
  .gongdan {
    span {
      margin-left: 10px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999;
    }
  }
  .gongdan2 {
    .item1 {
      display: flex;
      justify-content: space-around;
      // height: 50px;
      font-size: 26px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      // line-height: 50px;

      color: #072074;
      margin-top: 52px;
      .itembox {
        color: #91a7dc;
        margin-top: 10px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        text-shadow: 0;
      }
      .itembox1 {
        text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
      }
    }
  }
}
.headers {
  width: 600px !important;
  background-color: #f9efe9;
  position: absolute;
  top: 80px;
  left: 805px;
  .item2 {
    color: #ec635e !important;
    text-shadow: 2px 4px 7px rgb(255 99 85 / 50%) !important;
  }
  .itembox2 {
    color: #d69d96 !important;
  }
  .itembox3 {
    text-shadow: 2px 4px 7px rgb(255 99 85 / 50%) !important;
  }
}
.shop {
  width: 360px;
  height: 520px;
  background-color: #fff;
  border-radius: 20px;
  float: right;
  position: relative;
  margin-top: -200px;
  // right: 15px;
  // top: 80px;
  padding: 15px;
  .heater {
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
    span {
      margin-left: 10px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999;
    }
  }

  .img1 {
    width: 20px;
    height: 20px;
    padding: 2px 5px 0px 7px;
    background-image: url(../../assets/排名图片/第一.png);
    font-size: 12px;
    margin-bottom: 22px;
    margin-top: 41px;
  }
  .img2 {
    width: 20px;
    height: 20px;
    padding: 2px 5px 0px 7px;
    background-image: url(../../assets/排名图片/第二.png);
    font-size: 12px;
    margin-bottom: 22px;
  }
  .img3 {
    width: 20px;
    height: 20px;
    padding: 2px 5px 0px 7px;
    background-image: url(../../assets/排名图片/第二.png);
    font-size: 12px;
    margin-bottom: 22px;
  }
  .img4 {
    width: 20px;
    height: 20px;
    padding: 2px 5px 0px 7px;
    background-image: url(../../assets/排名图片/其他排名.png);
    font-size: 12px;
    margin-bottom: 22px;
  }
  .img5 {
    padding: 2px 5px 0px 3px;
  }
}
.hot {
  height: 398px;
  position: absolute;
  top: 75px;
  right: 40px;
}
.hotData {
  display: flex;
  justify-content: space-between;
  width: 250px;
  font-size: 14px;
  margin-bottom: 26px;
}
.texts {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #737589;
}
.echarts {
  width: 1220px;
  height: 298px;
  border-radius: 20px;
  background-color: #fff;
  position: absolute;
  top: 225px;
  right: 380px;
  padding: 15px;
  .echarts1 {
    margin-left: 30px;
  }
  .echarts2{
    position: absolute;
    top: 40px;
    right: 80px;

  }
}
.isBool{
  width: 130px;
  height: 35px;
  background-color: #fff;
  background: rgba(233,243,255,.37);
    border-radius: 10px;
    float: right;
    margin-top: -20px;
    display: flex;
    justify-content: space-evenly;
    line-height: 35px;
    .boxs{
      width: 28%;
      box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
      background-color: #fff;
      border-radius: 10px;
      text-align: center;
    }
    div{
      width: 28%;
      border-radius: 10px;
      text-align: center;
    }
}
.bing{
  float: right;
  padding: 25px;
  margin-top: 60px;
  margin-right: 685px;
  width: 900px;
  height: 390px;
  border-radius: 20px;
  background-color: #fff;
  .text{
    font-weight: 700;
    margin-bottom: 20px;
  }
  .binbox{
    float: right;
    width: 180px;
    height: 240px;
    background: linear-gradient(135deg,transparent,#f8f8f9 0) 0 0,linear-gradient(-135deg,transparent 12px,#f8f8f9 0) 100% 0,linear-gradient(-45deg,transparent,#f8f8f9 0) 100% 100%,linear-gradient(45deg,transparent 12px,#f8f8f9 0) 0 100%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    margin-top: -270px;
    margin-right: 70px;
    text-align: center;
    padding-top: 40px;
    .txt{
      font-size: 24px;
      font-weight: 700;
      color: #072074;
    }
    div{
      margin-bottom: 20px;
    }
  }
}
.kong{
  float: right;
  width: 675px;
  height: 385px;
  background-color: #fff;
  border-radius: 20px;
  margin-top: -390px;
  margin-right: -10px;
  padding: 20px;
  font-weight: 700;
  .img{
    margin-left: 240px;
    margin-top: 100px;
    .txt{
      margin-left: 35px;
      margin-top: 10px;
    }
  }
}
.el-icon-right{
  float: right;
  margin-top: -40px;
  font-size: 20px;
  color: #5f84ff;
    cursor: pointer;
}
.icon{
  margin-top: -20px;
}
</style>
